import { Pagination,Form, Input, Button, Table, Popconfirm, Space,Modal,Select } from 'antd'
// import '../Role_management/role_management.scss'
import http from '../../utils/http'
import { useEffect,useState } from 'react';
import store from '../../store/index'
const { Option } =Select;
const UserTable = ({ setState }) => {
    const [form] = Form.useForm();
    const [searchForm] = Form.useForm();
    const [editForm] = Form.useForm();
    //修改Modal的样式
    const layout = {
        labelCol: {
            span: 8,
        },
        wrapperCol: {
            span: 14,
        },
    };
    const tailLayout = {
        wrapperCol: {
            offset: 8,
            span: 16,
        },
    };
    const toTimes = (value) => {
        if (value) {
            let date = new Date(value)
            let y = date.getFullYear()  //获取年份
            let m = date.getMonth() + 1  //获取月份
            m = m < 10 ? "0" + m : m  //月份不满10天显示前加0
            let d = date.getDate()  //获取日期
            d = d < 10 ? "0" + d : d  //日期不满10天显示前加0
            return y + "-" + m + "-" + d
        }
        else {
            return null
        }
    }
    //获取数据
    const [data,setData] = useState([])
    const [total, setTotal] = useState(0)
    useEffect(() => {
       getData()
    }, [])
    const getData=()=>{
        http({
            url: '/user/getuserInfo'
        }).then((res) => {
            console.log(res)
            if (res.code === 200) {
                if (res.data.records) {
                    let arr = res.data.records.map((v, i) => {
                        return {
                            key: v.usId,
                            usName: v.usName,
                            usPhone: v.usPhone,
                            usSex: v.usSex == 0? '男' : '女',
                            usIdcard: v.usIdcard,
                            usEmail: v.usEmail,
                            adId: v.adId,
                            usCreatetime: toTimes(v.usCreatetime),
                            usState:v.usState
                        }
                    })
                    setData(arr);
                    // sessionStorage.setItem('roleTable', JSON.stringify(arr));
                }
            }
        })
    }
    //修改确定按钮
    const onFinish = (values) => {
        let createtime;
        if (values.usCreatetime) {
            let date = new Date(values.usCreatetime)
            let y = date.getFullYear()  //获取年份
            let m = date.getMonth() + 1  //获取月份
            m = m < 10 ? "0" + m : m  //月份不满10天显示前加0
            let d = date.getDate()  //获取日期
            d = d < 10 ? "0" + d : d  //日期不满10天显示前加0
            createtime = y + "-" + m + "-" + d;
        }
        values.usCreatetime = createtime
        values.usSex=values.usSex=='男'?0:1
        values.usId = editId
        console.log('values',values);
        http({
            url: '/user/updateUser',
            method: 'post',
            data: values
        }).then((res) => {
            // console.log(res)
            if(res.code===200){
            //    form.resetFields();
                // seteditModel(false)
                getData() 
            }
            
        })
    };
    //取消修改
    const quxiao = () => {
        seteditModel(false)
    }
    const xinzeng = () => {
        setState(2)
    }
    const resize = () => {
        searchForm.getFieldsValue(true).username = ''
        getData()
    }
    const search = () => {
        let Inp = searchForm.getFieldsValue(true).username
        console.log(Inp)
        let chajson = { 'usName': Inp }
        console.log(chajson)
        http({
            url: '/user/getuserInfo',
            // method: 'post',
            params: chajson
        }).then((res) => {
            console.log('cha', res)
            if (res.data.records) {
                let arr = res.data.records.map((v, i) => {
                    return {
                        key: v.usId,
                        usName: v.usName,
                        usPhone: v.usPhone,
                        usSex: v.usSex == 0? '男' : '女',
                        usIdcard: v.usIdcard,
                        usEmail: v.usEmail,
                        adId: v.adId,
                        usCreatetime:toTimes(v.usCreatetime)
                    }
                })
                setData(arr);
                // sessionStorage.setItem('roleTable', JSON.stringify(arr));
            }
            else{
                setData([]);
            }
        })
    }
    //修改id
    const [editId, seteditId] = useState('')
    //设置修改Modal的显示与隐藏
    const [editModel, seteditModel] = useState(false)
    const openEditBox = (a, b) => {
        //获取当前时间
        let yy = new Date().getFullYear();
        let mm = new Date().getMonth() + 1;
        mm = mm < 10 ? '0' + mm : mm
        let dd = new Date().getDate();
        dd = dd < 10 ? '0' + dd : dd
        let gettime = yy + "-" + mm + "-" + dd;
        console.log(a, b, gettime)
        editForm.setFieldsValue({
            usName: b.usName,
            usPhone: b.usPhone,
            usSex: b.usSex,
            usIdcard: b.usIdcard,
            usEmail: b.usEmail,
            adId: b.adId,
            usCreatetime:gettime
        })
        seteditModel(true)
        seteditId(b.key)
    }
    // const edithideModal = () => {
    //     seteditModel(false)
    // }
    function cancel(e) {
    }
    const edithideModal = () => {
        seteditModel(false)
    }
    function confirm(a, b) {
        let id = [];
        if (b) {
            id.push(b.key)
        } else {
            id = newSelectData.map(v => v.key)
        }
        http({
            url: '/user/deleteUser',
            method: 'post',
            data: id
        }).then((res) => {
            console.log(res)
            if (res.code === 200) {
                getData()
            }
        })
        // console.log('id',id)
        setselectedRowKeys([])
    }
    const columns = [
        {
            title: '用户姓名',
            dataIndex: 'usName',
            render: (text) => <a>{text}</a>,
        },
        {
            title: '联系方式',
            dataIndex: 'usPhone',
        },
        {
            title: '性别',
            dataIndex: 'usSex',
        },
        {
            title: '身份账号',
            dataIndex: 'usIdcard',
        },
        {
            title: '邮箱',
            dataIndex: 'usEmail',
        },
        {
            title: '更新操作人',
            dataIndex: 'adId',
        },
        {
            title: '更新时间',
            dataIndex: 'usCreatetime',
        },
        {
            title: '操作',
            dataIndex: 'operation',
            render: (text, record) => (
                <Space size="middle">
                    <a onClick={() => { openEditBox(text, record) }}>修改</a>
                    <Popconfirm
                        title="确定要删除吗?"
                        onConfirm={() => { confirm(text, record) }}
                        onCancel={cancel}
                        okText="Yes"
                        cancelText="No"
                        disabled={record.usState == 1 ? true : false}
                    >
                        <a href="#" disabled={record.usState == 1 ? true : false}>删除</a>
                    </Popconfirm>
                </Space>
            ),
        },
    ];
    //将选中的数组的key值存放到新的数组中
    const [newSelectData,setnewSelectData] = useState([])
    const [selectedRowKeys,setselectedRowKeys]=useState([])
    const rowSelection = {
        selectedRowKeys,
        onChange: (selectedRowKeys, selectedRows) => {
            setselectedRowKeys(selectedRowKeys)
            setnewSelectData(selectedRows)
            console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
        },
        getCheckboxProps: (record) => (
            // console.log(record),
            {
            disabled: record.usState === 1,
            // Column configuration not to be checked
            // name: record.name,
        })
    };
//改变页码
function onChange(pageNumber) {
    console.log('Page: ', pageNumber);
    let pageChange={'page':pageNumber}
    console.log(pageChange)
    http({
        url: '/roleinfo/roleInfoByName',
        method: 'post',
        params: pageChange
    }).then((res)=>{
        console.log(res)
    })
}
    return <div className='roleContent'>
        <Form form={form} name="horizontal_login" layout="inline" className='title'>
            <Form.Item
                name="username">
                <div className='kuai'>
                    <span></span>
                    <span>用户信息管理</span>
                </div>
            </Form.Item>
            <Form.Item className='btn'>
                <div>
                    <Button className='cha'
                        type="primary"
                        onClick={xinzeng}>新增</Button>
                   <Popconfirm title="确定要将他们全部删除吗？"
                            onConfirm={() => { confirm() }}
                            onCancel={cancel} okText="Yes" cancelText="No">
                            <a href="#"><Button className='resize' type="primary">批量删除</Button></a></Popconfirm>
                </div>

            </Form.Item>
        </Form>
        <div className='biao'>
            <Form form={searchForm} name="horizontal_login" layout="inline" className='Role'>
                <Form.Item
                    name="username"
                    label='角色名称'
                ><Input placeholder='请输入角色姓名' />
                </Form.Item>
                <Form.Item className='btn'>
                    <div>
                        <Button className='cha'
                            type="primary"
                            onClick={search}>查询</Button>
                        <Button className='resize' onClick={resize} type="primary">重置</Button>
                    </div>

                </Form.Item>
            </Form>
            <Table className='table1'
                rowSelection={{
                    ...rowSelection,
                }}
                columns={columns}
                dataSource={data}
                pagination={false}
                />
                 <Pagination className='page'
                total={total} onChange={onChange} />
            </div>
        <Modal
            title="修改"
            visible={editModel}
            footer={null}
            onCancel={edithideModal}
            // initialValues={editdata}
        >
            <Form {...layout} form={editForm} name="control-hooks" onFinish={onFinish}>
                <Form.Item
                    name="usName"
                    label="用户姓名"
                    rules={[
                        {
                            required: true,
                        },
                    ]}
                >
                    <Input />
                </Form.Item>
                <Form.Item
                    name="usPhone"
                    label="联系方式"
                    rules={[
                        {
                            required: true,
                        },
                    ]}
                >
                    <Input />
                </Form.Item>
                <Form.Item
                    name="usSex"
                    label="性别"
                    rules={[
                        {
                            required: true,
                        },
                    ]}
                >
                    <Select
                        placeholder="请选择创建状态"
                        allowClear
                        disabled
                    >
                        <Option value="0">男</Option>
                        <Option value="1">女</Option>
                    </Select>
                </Form.Item>
                <Form.Item
                    name="usIdcard"
                    label="身份账号"
                    rules={[
                        {
                            required: true,
                        },
                    ]}
                >
                   <Input></Input>
                </Form.Item>
                <Form.Item
                    name="usEmail"
                    label="邮箱"
                    rules={[
                        {
                            required: true,
                        },
                    ]}
                >
                    <Input />
                </Form.Item>
                <Form.Item
                    name="adId"
                    label="更新操作人"
                    rules={[
                        {
                            required: true,
                        },
                    ]}
                >
                    <Input disabled/>
                </Form.Item>
                {/* <Form.Item
                    name="usCreatetime"
                    label="创建时间"
                    rules={[
                        {
                            required: true,
                        },
                    ]}
                >
                    <Input/>
                </Form.Item> */}
                <Form.Item
                    name="usCreatetime"
                    label="更新时间"
                    rules={[
                        {
                            required: true,
                        },
                    ]}
                >
                    <Input disabled/>
                </Form.Item>
                <Form.Item {...tailLayout}>
                    <Button type="primary" htmlType="submit">
                        提交
                    </Button>
                    <Button htmlType="button" onClick={quxiao} style={{ marginLeft: '20px' }}>
                        取消
                    </Button>
                </Form.Item>
            </Form>
        </Modal>
    </div>
};
export default UserTable